<template>
	<uv-navbar placeholder :title="title" @leftClick="leftClick" />
	<div class="payment-success-container">
		<div class="success-content" v-if="showSuccess">
			<div class="success-icon"></div>
			<h1 class="success-title">支付成功</h1>
			<p class="success-message">您的订单支付成功，工作人员正快马加鞭帮您处理</p>
			<view class="op">
				<uv-button customStyle="color:#333" color="#f2f2f2" @click="showOrder" style="width:40%">查看订单</uv-button>
			</view>
		</div>
		<div class="error-content" v-if="showError">
			<div class="error-icon"></div>
			<h1 class="error-title">支付失败</h1>
			<uv-text class="error-message" :text="err_msg"></uv-text>
		</div>
	</div>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		getPaySuccess
	} from '@/api'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	const title = ref('')
	const order_id = ref('')
	const err_msg = ref('')
	const showSuccess = ref(false)
	const showError = ref(false)
	onLoad(async (option) => {
		console.log('---onload---',option)
		order_id.value = option.id
		if (option.err) {
			console.log('--option.err--',option.err)
			err_msg.value = decodeURIComponent(option.err)
		} else {
			err_msg.value = '支付未完成，请检查支付信息后重试'
		}
		uni.showLoading({
			title: '加载中',
			mask: true
		})
		showSuccess.value = (await getPaySuccess({
			order_id: order_id.value
		})).result
		uni.hideLoading()
		showError.value = !showSuccess.value
		// 根据支付结果设置标题
		title.value = showSuccess.value ? '支付成功' : '支付失败'
	})
	const leftClick = () => {
		if (showSuccess.value) {
			const pages = getCurrentPages();
			if (pages.length >= 3) { // 确保有足够的页面可以回退
				uni.navigateBack({
					delta: 2
				});
			} else {
				uni.navigateBack()
			}
		} else {
			uni.navigateBack()
		}
	}

	const showOrder = () => {
		uni.navigateTo({
			url: '/pages-user/order?active=2'
		})
	}
</script>

<style lang="scss" scoped>
	.payment-success-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: white;
		padding: 20px;
		position: relative;
	}

	/* 顶部浅灰色细线 */
	.payment-success-container::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 1px;
		background-color: #f0f0f0;
	}

	.success-content {
		text-align: center;
		max-width: 400px;
		width: 100%;
	}

	.success-icon {
		width: 80px;
		height: 80px;
		margin: 0 auto 20px;
		background-color: #4CAF50;
		border-radius: 50%;
		position: relative;
	}

	/* 使用CSS绘制对勾 */
	.success-icon::before {
		content: '';
		position: absolute;
		width: 24px;
		height: 12px;
		border-left: 4px solid white;
		border-bottom: 4px solid white;
		transform: rotate(-45deg);
		left: 50%;
		top: 50%;
		margin-left: -12px;
		margin-top: -8px;
	}

	.success-title {
		font-size: 24px;
		font-weight: 500;
		color: #333;
		margin-bottom: 15px;
	}

	.success-message {
		font-size: 16px;
		color: #999;
		line-height: 1.5;
	}

	.error-content {
		text-align: center;
		max-width: 400px;
		width: 100%;
	}


	.error-icon {
		width: 80px;
		height: 80px;
		background-color: #FF4D4F;
		border-radius: 50%;
		position: relative;
		margin: 0 auto 20px;
	}

	.error-icon::before,
	.error-icon::after {
		content: '';
		position: absolute;
		width: 40px;
		height: 4px;
		background-color: white;
		top: 50%;
		left: 50%;
	}

	.error-icon::before {
		transform: translate(-50%, -50%) rotate(45deg);
	}

	.error-icon::after {
		transform: translate(-50%, -50%) rotate(-45deg);
	}

	.error-title {
		font-size: 24px;
		font-weight: 500;
		color: #333;
		margin-bottom: 15px;
	}

	.error-message {
		font-size: 16px;
		color: #999;
		text-align: center;
		line-height: 1.5;
	}
	
	.op {
		display: flex;
		justify-content: center;
		margin-top: 20px;
	}
</style>